import { NavLink } from "react-router-dom"

function NavView() {
  
  const navList = [
    { name: '调用 setState 后发生了什么？解释其异步批处理机制', path: '/setState' },
    { name: '解释 React 的错误边界', path: '/errorBoundaries' },
    { name: '解释 React 的“单向数据流”特性及其实践意义', path: '/oneWay' },
    { name: '解释 React 的“受控组件”与“非受控组件”区别及适用场景', path: '/controlledOrUncontrolled' },
    { name: '如何通过 React.memo 优化函数组件性能？', path: '/reactMemo' },
    { name: 'Diff 算法的基本原理', path: '/diff' },
    { name: '路由的使用方法', path: 'useRouter' },
    { name: 'Redux 的使用方法', path: 'useRedux' }
  ]

  return (
    <ul className="nav-view">
      {
        navList.map(item =>
          <li key={item.path}>
            <NavLink to={item.path}>{ item.name }</NavLink>
          </li>
        )
      }
    </ul>
  )
}

export default NavView